<script lang="ts">
import {defineComponent, PropType} from 'vue'
import DialogAndBlock from "@/components/DialogAndBlock/index.vue";
import {FileResult} from "@/entityType/FileResult";
import fileReq from "@/api/file";
import pathBrowserify from "path-browserify";
import {ElMessage, ElMessageBox} from "element-plus";
import {SelectConfigToModelMixin} from "@/components/SelectConfigToModel";

export default defineComponent({
  name: "SelectBasePath",
  components: {DialogAndBlock},
  props: {
    modelValue:{
      type: String as PropType<String>,
      default: '/'
    },
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false,
    }
  },
  mixins:[SelectConfigToModelMixin],
  computed: {
    breadcrumbList() {
      const result = ['/']
      const value = this.modelValueAsync.split('/').filter(i=>!!i)
      result.push(...value)
      return result
    }
  },
  emits: ['update:modelValue','config'],
  data() {
    return {
      files: [] as FileResult[],
      selectFileName: '',
    }
  },
  methods: {
    /**
     * 这个方法用来重写
     */
    btnConfigCenterFunc() {
      this.$refs.dialogRef.close()
    },
    /**
     * 这个方法很重要，相当于计算属性的set方法，不能用监听，会出现双向监听问题
     * @param val
     */
    setModelValueAsync(val) {
      this.modelValueAsync = val
      this.$nextTick(this.getList)
      this.selectFileName = ''
    },
    pathsToPath(index): string {
      const slice = this.breadcrumbList.slice(0,index+1);
      const s = slice.join('/');
      this.setModelValueAsync(pathBrowserify.resolve('/',s))
    },
    show() {
      if(this.disabled) {
        return
      }
      this.$refs.dialogRef.open()
      this.getList()
    },
    getList() {
      return fileReq.getDirFileList(this.modelValueAsync).then(res=>{
        this.files = res.data
      })
    },
    fileClick(item:FileResult) {
      if(item.fileName !== this.selectFileName) {
        this.selectFileName = item.fileName
      } else {
        this.setModelValueAsync(pathBrowserify.resolve(this.modelValueAsync,item.fileName))
      }
    },
    creatDir(){
      ElMessageBox.confirm("新建文件夹","新建文件夹",{
        showInput: true,
        inputPlaceholder: "新建文件夹",
        inputValidator:(value)=>{
          if(!value){
            return '不能为空'
          }
          return true
        }
      }).then(res=>{
        const path = pathBrowserify.resolve(this.modelValueAsync,res.value)
        fileReq.createDir(path).then(res=>{
          ElMessage.success(res.data as string)
          this.getList()
        })
      })
    },
  }
})
</script>

<template>
  <div style="width: 100%">
    <el-input
      readonly
      placeholder="请选择路径"
      @click.stop="show"
      :model-value="modelValueAsync"
      :disabled="disabled"
    >
    </el-input>
    <DialogAndBlock
      ref="dialogRef"
      title="选择路径"
      @close="closeDialog"
    >
      <div style="height: 70vh">
        <div class="paths">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item,index) in breadcrumbList"
              :key="'paths'+index"
              >
              <div
                style="cursor: pointer"
                @click.stop="pathsToPath(index)"
              >
                {{ item === '/' ? '跟路径': item }}
              </div>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="fileContentHeight">
          <div
            v-for="(item,index) in files"
            :key="'files'+index"
            class="fileItem"
            :class="{selectFile: selectFileName === item.fileName}"
            @click.stop="fileClick(item)"
          >
            {{item.fileName}}
          </div>
        </div>
        <div class="fileTools">
          <el-button
            text
            type="success"
            icon="FolderAdd"
            @click.stop="creatDir"
            v-if="checkAuths(['mkdir'])"
          >
            新建文件夹
          </el-button>
          <el-button
            type="primary"
            class="confirmBtn"
            @click.stop="btnConfigClick"
          >
            确定
          </el-button>
        </div>
      </div>
    </DialogAndBlock>
  </div>
</template>

<style scoped lang="scss">
$FileToolsHeight: 24px;
.paths {
  height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.fileContentHeight{
  height: calc(100% - 50px - $FileToolsHeight);
  overflow: auto;
  .fileItem{
    padding: 5px 2px;
    cursor: pointer;
  }
  .selectFile{
    background-color: #0080f736;
  }
}
.fileTools{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  ::v-deep {
    .el-button{
      padding: 0px;
      height: auto;
    }
    .confirmBtn{
      padding: 0px 15px;
    }
    .el-icon {
      font-size: $FileToolsHeight;
    }
  }
}
</style>
